<template>
    <div>
        <div @click="click" class="img-upload">
            <slot></slot>
            <input type="file" ref="file" @change="onChange"
                   :accept="input.accept"
                   :disabled="input.disabled"
                   :multiple="input.multiple">
            <div class="progress" v-if="upload_progress!==null">
                <div>{{ upload_progress }}%</div>
            </div>
        </div>
        <div class="shadow" v-if="is_cropper">
            <div class="content">
                <vue-cropper
                  ref="cropper"
                    :img="config.img || cropper.img"
                    :outputSize="config.size || cropper.size"
                    :outputType="config.outputType || cropper.outputType"
                    :info="config.info || cropper.info"
                    :canScale="config.canScale || cropper.canScale"
                    :autoCrop="config.autoCrop || cropper.autoCrop"
                    :autoCropWidth="config.autoCropWidth || cropper.autoCropWidth"
                    :autoCropHeight="config.autoCropHeight || cropper.autoCropHeight"
                    :fixed="config.fixed || cropper.fixed"
                    :canMove="config.canMove || cropper.canMove"
                    :fixedNumber="config.fixedNumber || cropper.fixedNumber"
                ></vue-cropper>
                <div class="button" @click="onCropper">確定</div>
                <div class="button cancel" @click="onCancel">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
    import VueCropper from 'vue-cropper';

    export default {
        props: ['value', 'crop', 'max', 'disabled', 'multiple' , 'config'],
        name: 'img-upload',
        components: {
            VueCropper: VueCropper
        },
        data() {
            return {
                cropper: {
                    img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
                    info: true,
                    size: 1,
                    outputType: 'jpeg',
                    canScale: false,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 900,
                    autoCropHeight: 500,
                    // 开启宽度和高度比例
                    fixed: true,
                    canMove:false,
                    fixedNumber: [9, 5]
                },
                is_cropper: false,
                input: {
                    accept: '.jpg,.png',
                    disabled: this.disabled || false,
                    multiple: this.multiple || false
                },
                upload_progress: null,
                options: {
                    maxWidth: 900,
                    maxHeight: 500,
                    crop: !!this.crop,
                },
            };
        },
        computed: {},
        created() {
            if (this.max) {
                this.options.maxWidth = this.max.width || this.options.maxWidth;
                this.options.maxHeight = this.max.height || this.options.maxHeight;
            }
        },
        methods: {
            click() {
                if (this.upload_progress || this.disabled) return;
                this.$refs.file.click();
            },
            onCropper(){
                this.$refs.cropper.getCropBlob((data) => {
                    let uploadParameter = {};
                    API.get('aliyun/oss/img/sign').then((res) => {
                        uploadParameter = res;

                        const time = (new Date()).getTime();
                        var formData = new FormData();
                        formData.append('OSSAccessKeyId', uploadParameter.accessid);
                        formData.append('policy', uploadParameter.policy);
                        formData.append('Signature', uploadParameter.signature);
                        formData.append('key', uploadParameter.dir + '/' + time);
                        formData.append('success_action_status', 200); // 指定返回的状态码
                        formData.append('file', data, 'img_' + time); // 填入文件

                        axios.post(uploadParameter.host, formData).then((resp) => {
                            let imgUrl = uploadParameter.host
                                + '/' + uploadParameter.dir
                                + '/' + time + '?x-oss-process=style/watermark';

                            this.$emit('input', imgUrl);
                            this.is_cropper = false;
                        })
                    })
                    this.input.disabled = false;
                    this.upload_progress = null;
                    this.$refs.file.value = '';
                })
            },
            onCancel() {
                this.is_cropper = false;
                this.input.disabled = false;
                this.$refs.file.value = '';
            },
            async onChange(event) {
                this.input.disabled = true;
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    this.is_cropper = true;
                    this.cropper.img = reader.result;
                }

            },
        }
    };
</script>

<style lang="scss" scoped>
    .img-upload {
        display: inline-block;
        cursor: pointer;
        position: relative;
        width: 100%;

        > input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            padding: 0;
            margin: 0;
            z-index: -1;
            display: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        > .progress {
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, .8);
            color: #000;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    }
    .shadow{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10;

        .content{
            position: absolute;
            top: 50%;
            width: 100%;
            height: 400px;
            margin-top: -200px;
            background: #fff;
            text-align: center;
        }

        .button{
            border-radius: 3px;
            font-size: 12px;
            padding: 2px 15px;
            color: #fff;
            background: #409EFF;
            text-align: center;
            display: inline-block;
            margin: 10px 0;
            cursor: pointer;

            &.cancel {
                background: #bbb;
                position: relative !important;
            }
        }
    }
</style>
